<template>
    <div>
        <template v-for="menu in userMenu">
            <el-sub-menu
                :index="menu.path"
                :key="menu._id"
                v-if="
                    menu.menuState == 1 &&
                    menu.children &&
                    menu.children.length > 0 &&
                    menu.children[0].menuType == 1
                "
            >
                <template #title>
                    <el-icon>
                        <component :is="menu.icon" />
                    </el-icon>
                    <span>{{ menu.menuName }}</span>
                </template>
                <tree-menu :userMenu="menu.children" />
            </el-sub-menu>
            <el-menu-item
                :index="menu.path"
                :key="menu._id"
                v-else-if="menu.menuState == 1 && menu.menuType == 1"
            >
                {{ menu.menuName }}
            </el-menu-item>
        </template>
    </div>
</template>

<script setup>
let props = defineProps({
    userMenu: Array,
});
</script>

<style lang="scss" scoped></style>
